<template>
    <div class="contentbox">
        <navBar :title="datas.name"/>
        <div class="medicine2detailbox">
        <van-row>
            <van-col span="6">【方名】</van-col>
            {{datas.name}}
        </van-row>
        <van-row>
            <van-col span="6">【组成】</van-col>
            {{datas.component}}
        </van-row>
        <van-row>
            <van-col span="6">【功效】</van-col>
            {{datas.effect}}
        </van-row>
        <van-row>
            <van-col span="6">【主治】</van-col>
            {{datas.detail}}
        </van-row>
        <van-row>
            <van-col span="6">【方解】</van-col>
            {{datas.medicinedetail}}
        </van-row>
        <van-divider />
            <van-row>
                <van-col offset="9" span="6">
                    <van-button icon="star-o" type="info" @click="like">
                        收藏
                    </van-button>
                </van-col>
            </van-row>
            <van-row>

                    <van-col offset="1" span="6">
                    <div v-show="datas.last != null">
                    <router-link :to="'/medicine2detail/'+datas.last">
                    <van-button  type="info">
                        上一个
                    </van-button>
                    </router-link>
                    </div>
                </van-col>
                <van-col offset="10" span="6">
                    <div v-show="datas.next != null">
                    <router-link :to="'/medicine2detail/'+datas.next">
                        <van-button type="info">
                            下一个
                        </van-button>
                    </router-link>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="commentbox" v-for="data2 in datas2" :key="data2.id">
            <div v-if="data2.channel==='找方剂'">
            <cards :data="data2"/>
            </div>
        </div>
        <van-divider />
         <div class="commentpostbox">
            <div v-if="$root.username===''" class="commentpostbox_login">
                <h4>您尚未登录，登录后才能发表评论</h4>
            </div>
            <div v-else class="commentpostbox_login2">
                <van-field
                    v-model="message"
                    rows="2"
                    autosize
                    label="发表评论"
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入评论"
                    show-word-limit
                />
                <van-row>
                    <van-col offset="21" span="3">
                        <van-button plain type="info" size="small" @click="submit">
                            提交
                        </van-button>
                    </van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>
<script>
import navBar from '../components/navBar.vue'
import cards from '../components/cards.vue'
const axios = require('axios');

export default{
    name:'medicine2detail',
    components:{
        navBar,
        cards
    },
    data(){
        return{
            num:0,
            datas:[],
            datas2:[],
            message:''
        }
    },
    methods:{
        like(){
            {
            // console.log(this.commentmessage)
            // console.log(this.data.comment)
            if(this.$root.username == ''){
                this.$toast.success('登录后才可以进行收藏');
            }
            else{
                console.log(this.$root.like2.push(this.num))
                axios({
                method:"patch",
                url:"http://localhost:3000/user/"+this.$root.userid2,
                data:{
                    "like2":this.$root.like1,
                    }
                }).then((data)=>{
                    console.log(data);
                })
                this.$toast.success('已收藏');
        }
            }
        },
        submit(){
            axios({
                method:"post",
                url:"http://localhost:3000/comment",
                data:{
                    "channel":"找方剂",
                    "name":this.$root.userid,
                    "imgurl":this.$root.imgurl,
                    "date": "2021-6-22",
                    "info":this.message,
                    "comment":[]
                    }
                }).then((data)=>{
                    console.log(data);
                })
        },
         getdata(){
            this.$axios.get("http://localhost:3000/medicinedetail/"+this.num)
                .then(res =>{
                    // console.log(res.data)
                this.datas=res.data
                console.log(this.datas)
            })
        },
        getdata2(){
                this.$axios.get("http://localhost:3000/comment")
                .then(res =>{
                    // console.log(res.data)
                    this.datas2=res.data
                    console.log(this.datas2)
                })
            },
    },
    mounted(){
        this.num=this.$route.params.id
        console.log(this.$route.params.id)
        this.getdata();
        this.getdata2();
    },
    watch:{
        '$route'(to, from) {
        this.num=this.$route.params.id    
        this.$router.go(0);
    }  
    }
}
</script>

<style>
    .medicine2detailbox{
        background-color: #F2F3F5;
    }
</style>